<template>
  <div>
    <Card dis-hover title="查看关联商品详情">
      <Row
        type="flex"
        style="
          flex-wrap: wrap;
          width: 900px;
          margin-bottom: 16px;
          position: relative;
        "
      >
        <Col class="colclass">商品名称： {{ productName }}</Col>
        <Col class="colclass">分类：{{ categoryPath }}</Col>
        <Col class="colclass">SPU编码： {{ spuNo }}</Col>
        <Col class="colclass">SKU编码： {{ skuNo }}</Col>
        <Col class="colclass">商品品牌： {{ brandName }}</Col>
      </Row>
      <div class="tableTitle">相同商品</div>
      <Table border :columns="columns1" :data="data1"></Table>
      <div class="tableTitle">成套商品</div>
      <Table border :columns="columns1" :data="data2"></Table>
      <div class="tableTitle">相关商品</div>
      <Table border :columns="columns1" :data="data3"></Table>
      <Row type="flex" justify="center" style="flex-wrap: wrap; margin: 16px">
        <Button @click="goBack">返回</Button>
      </Row>
    </Card>
  </div>
</template>

<script>
import { ApiRequest } from '@api/basePage';
export default {
  components: {},
  data () {
    return {
      columns1: [
        {
          title: '商品状态',
          key: 'stateStr'
        },
        {
          title: '分类',
          key: 'categoryPath'
        },
        {
          title: 'SPU编码',
          key: 'spuNo'
        },
        {
          title: 'SKU编码',
          key: 'skuNo'
        },
        {
          title: '商品名称',
          key: 'productName'
        },
        {
          title: '销售属性',
          key: 'specDetailStr'
        }
      ],
      data1: [],
      data2: [],
      data3: [],
      uuid: '',
      productUuid: '',
      skuNo: '',
      productName: '',
      categoryPath: '',
      skuNo: '',
      spuNo: '',
      brandName: ''
    };
  },
  mounted () {},
  created () {
    this.uuid = this.$route.query.uuid;
    this.productUuid = this.$route.query.productUuid;
    this.skuNo = this.$route.query.skuNo;
    this.getConfigData();
    this.initData();
  },
  methods: {
    getConfigData () {
      this.pagePath = this.$route.path;
      let dynamicData = require('./configjs/relatedGoodsManageList').default;
      this.requestApi = dynamicData.requestApi; // 页面所需接口集合
      this.$set(this.$data, 'dynamicData', dynamicData);
    },
    initData () {
      let data = {
        skuNo: this.skuNo
      };
      // 开始请求商品列表
      ApiRequest(
        this.requestApi.baseGetModelBySkuNo.url + '?skuNo=' + this.skuNo,
        this.requestApi.baseGetModelBySkuNo.type,
        data
      ).then((res) => {
        if (res.retStatus === '1') {
          this.productName = res.retData.m.productName;
          this.categoryPath = res.retData.m.categoryPath;
          this.skuNo = res.retData.m.skuNo;
          this.spuNo = res.retData.m.spuNo;
          this.brandName = res.retData.m.brandName;
          if (res.retData.XTSP !== undefined) {
            this.data1 = res.retData.XTSP;
          }
          if (res.retData.CTSP !== undefined) {
            this.data2 = res.retData.CTSP;
          }
          if (res.retData.XGSP !== undefined) {
            this.data3 = res.retData.XGSP;
          }
        }
      });
    },
    goBack () {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.colclass {
  height: 30px;
  line-height: 30px;
  margin-right: 80px;
}

.absoluteBtn {
  position: absolute;
  top: 0;
  right: -150px;
}

.tableTitle {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
}
</style>